<template>
	<view v-if="orderInfo.userAddress">
		创建订单-结算页面
		<!-- 用户信息 -->
		<view>
			<view>{{orderInfo.userAddress.consignee}}</view>
			<view>{{orderInfo.userAddress.telNumber}}</view>
			<view>{{orderInfo.userAddress.address}}</view>
		</view>
		<!-- 订单信息 -->
		<view class="produce flex" v-for="produce in orderInfo.skuGroupList" :key="produce.mainSku.skuId">
			 
			<view class="col-30">
				<image :src="produce.mainSku.skuImage"></image>
			</view>
			<view class="col-60">
				<view>{{produce.mainSku.skuName}}</view>
				<view class="flex" style="justify-content: space-between;">
					<view class="price">
						<text>{{produce.mainSku.skuOriginalPrice}}--</text>
						<text>{{produce.mainSku.skuPrice}}</text>
					</view>
					<view>{{produce.mainSku.count}}</view>
				
				</view>
			</view>
		</view>
		<!-- 支付价格与跳转 -->
		<view>
			￥{{orderInfo.payPrice}}
			<button type="primary" @click="toPay">去结算</button>
		</view>
	</view>
</template>

<script setup>
	// 导入响应ref
	import {ref} from 'vue'
	// 获取确认订单接口
	import {ConfirmOrder,PlaceOrder} from '../../api/index.js'
	// 订单信息
	const orderInfo = ref({})
	// 组件创建完，获取确认订单信息
	ConfirmOrder({"optional":true,"userAddressId":null})
	.then(res=>{
		// 更新订单信息
		orderInfo.value = res.data;
	})
	function toPay(){
		// 01 创建订单，
		var info = {
			ccbParamSJ: "",
			electronicInvoice: null,
			fromCart: true,
			otherDiscountList: [{type: 5, target: "0"}],
			publicTransfer: false,
			recommendCode: "",
			remark: "",
			// sku列表
			skuGroupList:orderInfo.value.skuGroupList,
			// 用户id自定义
			userAddressId:orderInfo.value.userAddress.addressId
			}
		PlaceOrder(info)
		.then(res=>{
			// 02 跳转到订单支付页面 并传入参数orderId
			if(res.code===200){
				uni.navigateTo({
					url:'/pages/orderpay/orderpay?orderId='+res.data
				})
				
			}else{
				// 如果没有200就是创建订单失败
				uni.showToast({
					title:res.message||'创建订单失败',
					icon:'error'
				})
			}
			
		})
		.catch(err=>{
			// 网络请求失败
			uni.showToast({
				title:"创建订单失败",
					icon:'error'
			})
		})
		
	}
</script>

<style>
	.flex{
		display: flex;
	}
	 
	.col-30 image{
		width: 200rpx;
		height: 200rpx;
		 
	}
	.col-10{
		flex-basis: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.col-60{
		flex-basis: 30%;
	}
	.col-60{
		flex-basis: 60%;
	}
</style>